<template>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
            :mode="mode" />

        <Editor :style="{ height: `${height}px` }" style="overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
            @onCreated="handleCreated" @onChange="updateHtml" />
    </div>
</template>
<script>
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getToken } from '@/utils/webStorage'

export default {
    components: { Editor, Toolbar },
    props: {
        html: {
            type: String,
            default: ''
        },
        height: {
            type: Number,
            default: 150
        }
    },
    setup(props, { emit }) {
        // 编辑器实例，必须用 shallowRef
        const editorRef = shallowRef()

        // 内容 HTML
        const valueHtml = ref(props.html)
        watch(props, (newValue, oldValue) => {
            valueHtml.value = newValue.html
        })

        const updateHtml = (val) => {
            emit('change', valueHtml.value)
        }
        const toolbarConfig = {
            toolbarKeys: [
                'undo', // 撤销
                'redo', // 重做
                'clearStyle', // 清除格式
                'blockquote', // 引用
                'bold', // 加粗
                'italic', // 斜体
                'through', // 删除线
                'underline', // 下划线
                'bulletedList', // 无序列表
                'numberedList', // 有序列表
                'color', // 文字颜色
                'insertLink', // 插入链接
                'fontSize', // 字体大小
                'lineHeight', // 行高
                'uploadImage', // 上传图片
                'delIndent', // 缩进
                'indent', // 增进
                'deleteImage',//删除图片
                'divider', // 分割线
                'insertImage', // 网络图片
                'insertTable', // 插入表格
                'justifyCenter', // 居中对齐
                'justifyJustify', // 两端对齐
                'justifyLeft', // 左对齐
                'justifyRight', // 右对齐
                'fullScreen' // 全屏

            ],
            excludeKeys: [
                'bgColor', // 背景色
                'codeBlock', // 代码段
                'emotion', // 表情
                'fontFamily', // 字体
                'headerSelect' // 标题
            ]
        }
        const editorConfig = {
            placeholder: '请输入内容...',
            MENU_CONF: {
                uploadImage: {// form-data fieldName ，默认值 'wangeditor-uploaded-image'
                    fieldName: 'editor-image',
                    // 单个文件的最大体积限制，默认为 2M
                    maxFileSize: 2 * 1024 * 1024, // 2M
                    // 最多可上传几个文件，默认为 100
                    maxNumberOfFiles: 10,
                    // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                    allowedFileTypes: ['image/*'],
                    // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                    // meta: {
                    //     token: 'xxx',
                    // },
                    // 将 meta 拼接到 url 参数中，默认 false
                    metaWithUrl: false,
                    // 自定义增加 http  header
                    headers: {
                        Authorization: getToken(),
                        "Content-Type": "multipart/form-data"
                    },
                    // 跨域是否传递 cookie ，默认为 false
                    withCredentials: true,
                    // 超时时间，默认为 10 秒
                    timeout: 5 * 1000, // 5 秒
                    // 自定义上传
                    async customUpload(file, insertFn) {  // TS 语法
                        // async customUpload(file, insertFn) {                   // JS 语法
                        // file 即选中的文件
                        // 自己实现上传，并得到图片 url alt href
                        /*
                            这里写上传事件
                        */
                        // 最后插入图片
                        insertFn(url, alt, href)
                    }
                }
            }
        }

        // 组件销毁时，也及时销毁编辑器
        onBeforeUnmount(() => {
            const editor = editorRef.value
            if (editor == null) return
            editor.destroy()
        })

        const handleCreated = (editor) => {
            editorRef.value = editor // 记录 editor 实例，重要！
        }

        return {
            editorRef,
            valueHtml,
            mode: 'default',
            toolbarConfig,
            editorConfig,
            handleCreated, updateHtml
        }
    }
}
</script>
<style lang="scss">
.w-e-text-placeholder {
    top: 10px;
}
.w-e-text-container blockquote, .w-e-text-container li, .w-e-text-container p, .w-e-text-container td, .w-e-text-container th, .w-e-toolbar * {
   line-height: 1; /* 这里设置行高为1.6，你可以根据需要修改 */
}
</style>